import { areaList } from '@vant/area-data';
import validate from '../../utils/validate'
import {
    addAddress, 
    getAddressInfo, 
    updateAddress
} from '../../service/address'
import toast from '../../utils/toast'

Page({

    /**
     * 页面的初始数据
     */
    data: {
        checked: false,
        areaList,
        showCity: false,

        name: '',
        phone: '',
        province: '',
        city: '',
        county: '',
        address: '',
        is_default: 0,
        
        city_select: '',
        
        error_name: '',
        error_phone: '',
        error_city: '',
        error_address: '',

        editId: null
    },

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function (options) {
        if (options.id) {
            // 设置顶部标题
            wx.setNavigationBarTitle({title: '修改地址'})

            // 设置编辑的id
            this.setData({
                editId: options.id
            })
            // 查询地址详情
            getAddressInfo(options.id).then(res => {
                console.log(res)
                // 更新 data 中的数据
                this.setData({
                    ...res,
                    city_select: res.province + '-' + res.city + '-' + res.county,
                    checked: res.is_default ? true : false
                })
            })
        }
    },

    /**
     * 切换是否默认
     */
    onChange(event) {
        this.setData({
            checked: event.detail,
            is_default: event.detail ? 1 : 0
        })
    },

    /**
     * 打开城市选择
     */
    openCity() {
        this.setData({showCity: true})
    },

    /**
     * 关闭城市选择
     */
    closeCity() {
        this.setData({showCity: false})
    },

    /**
     * 去确认城市选择
     */
    confirmCity(event) {
        const {values} = event.detail
        this.setData({
            showCity: false, // 关闭城市选择
            province: values[0].name, // 省
            city: values[1].name, // 市
            county: values[2].name, // 区县
            city_select: values[0].name + '-' + values[1].name + '-' + values[2].name
        })
        this.checkInput()
    },

    /**
     * 执行地址添加 / 或者地址编辑
     */
    onAddAddress() {
        // 1. 表单验证
        const check = this.checkInput()
        if (!check) return

        // 2. 处理要提交的参数
        const {name, phone, province, city, county, address, is_default} = this.data

        const data = {name, phone, province, city, county, address, is_default}


        // 3. 发送请求, 执行添加
        // 判断是修改还是添加
        if(this.data.editId) { // 执行修改
            updateAddress(this.data.editId, data).then(() => {
                // 4. 提示修改成功, 返回地址列表
                toast.success('修改成功', () => {
                    wx.navigateBack()
                })
            })
    
        } else { // 执行添加
            addAddress(data).then(() => {
                // 4. 提示添加成功, 返回地址列表
                toast.success('添加成功', () => {
                    wx.navigateBack()
                })
            })
        }
    },

    /**
     * 验证用户输入的内容
     * @returns {boolean}
     */
    checkInput() {
        const checkName = validate.min(this.data.name, 2)
        const checkPhone = validate.phone(this.data.phone)
        const checkCity = validate.min(this.data.city, 2)
        const checkAddress = validate.min(this.data.address, 2)

        // 表单验证
        if (!checkName) {
            this.setData({error_name: '请输入收货人姓名'})
        } else {
            this.setData({error_name: ''})
        }

        if (!checkPhone) {
            this.setData({error_phone: '手机号格式不正确'})
        } else {
            this.setData({error_phone: ''})
        }

        if (!checkCity) {
            this.setData({error_city: '请选择城市'})
        } else {
            this.setData({error_city: ''})
        }

        if (!checkAddress) {
            this.setData({error_address: '请选择城市'})
        } else {
            this.setData({error_address: ''})
        }

        if(checkName && checkPhone && checkCity && checkAddress) return true
        return false
    }
})